<%@page import="com.lp.ezuiz.EzuizService"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ page import="com.lp.cfg.ProConfig"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<!DOCTYPE html>
<html>
<head>
	<title><%=ProConfig.PROJECT_NAME %></title>
	<%@ include file="/WEB-INF/wechat/iot/common/resource_lib.jsp"%>
	<style type="text/css">
		.container{
			background: #000;
		}
		.sensor-container{
			background: transparent;width:100%;
		}
		.sensor-container img{
			vertical-align: middle;margin: 0 0 0 10px;width: 35px;
		}
		.sensor-container .sensor-name{
			margin-left: 15px;font-size: 14px; 
		}
		.sensor-container .sensor-value{
			float: right;font-size: 24px;margin-right: 10px; color: #008fcd;
		}.sensor-container .sensor-type{
			float: right;font-size: 20px;margin-right: 13px;
		}
		.sensor-container img.sensor-control{
			float: right;  padding-right: 13px;;
		}
		.weui-media-box{
			padding: 7px;
		}
		
		.tempdata{
			font-size: 12px;
		    color: #666;
		    text-align: center;
		    padding: 10px;
		}
		.weui-panel.weui-panel_access.active .weui-panel__bd {
			display: none;
		}
		.weui-panel.weui-panel_access.active .weui-panel__hd{
			
		}
		.detail-line{
			padding-left: 20px;
			padding-top: 3px;
			font-size: 14px;
		}
		
	.operateColumn{
		padding-top: 30px;
		margin-left: 30px;
	}
	
	.operateColumn a{
		color: #18bbfc;
		text-decoration: underline !important;
	}
	.operate_column_one{
		width: 40px;
	   height: 40px;
	   float: left;
	   font-size: 30px;
	   text-align: center;
	   line-height: 40px;
	}
	.operate_column_cell {
	    height: 40px;
	}
	.operate_btn, .stop_btn{
		cursor: pointer;
	}
	.bblack{
		color: #000;
	}
	</style>
</head>
<body>
	<div class="t-c title-info" >
		<span>视频直播</span>
		<div class="back" onclick="forwardBack()" style=" position: fixed;top: 0px;" >
		返回</div>
		
	</div>
	<div style="height: 0px;"></div>
	<div class="container">
		
		<iframe
		  src=""
		  width="100%"
		  height="350px"
		  id="myPlayer"
		  style="border: 0;"
		  allowfullscreen >
		</iframe>
		
		<div class="jui-detail_get" style="background: #fff;padding:10px;padding-bottom:0; color: #666;" data-options=" url:'/video?id=$videoId$',success:'successfunc' "  >
			<div>
				<p>摄像头信息</p>
			</div>
			<div class="detail-line" style="margin-top: 5px;">
				<span type-name="scene_name" type-value='h'></span>  /  <span type-name="name" type-value='h'></span>
			</div>
		</div>
		
		<div style="background: #fff;padding:10px;color: #666;padding-bottom:0;">
			<div>
				<p>
					<span>操作</span>
					<span style="color: #3499da;margin-left: 20px;" onclick="lokDetail()" >详情</span>
				</p>
			</div>
			<div class="detail-line" style="margin-top: 10px;">
				<a href="javascript:;" class="weui-btn weui-btn_mini weui-btn_primary device_capture">图片抓拍</a>
			</div>
		</div>
		
		<div style="background: #fff;padding:10px;color: #666;">
			<div>
				<p>云台</p>
			</div>
			<div class="detail-line" style="margin-top: 5px;color:#000;">
				<a href="javascript:;"  tag="0" class="weui-btn weui-btn_mini weui-btn_plain-primary bblack operate_btn">上</a>
				<a href="javascript:;"  tag="1" class="weui-btn weui-btn_mini weui-btn_plain-primary bblack operate_btn">下</a>
				<a href="javascript:;"  tag="2" class="weui-btn weui-btn_mini bblack weui-btn_plain-primary operate_btn">左</a>
				<a href="javascript:;"  tag="3" class="weui-btn weui-btn_mini bblack weui-btn_plain-primary operate_btn">右</a>
				<a href="javascript:;" class="weui-btn weui-btn_mini bblack weui-btn_plain-default stop_btn">停止</a>
				
			</div>
		</div>
		
	</div>
	
</body>
	<script type="text/javascript">
	
		var token = "<%=EzuizService.EZUIZ_TOKEN%>";
		var videoId =  GetQueryString("id") ;
		var video_id = videoId ;
		// 场景id
		var sid =  GetQueryString("sid");
		
		function successfunc(data){
			if( isOK(data) ){
				$("#myPlayer").attr("src","https://open.ys7.com/ezopen/h5/iframe_se?url=ezopen://open.ys7.com/"+data.data.device_serial+"/"+ 
						data.data.channel+".hd.live&autoplay=1&accessToken="+token );
			}
		}
		
		function forwardBack(){
			forward('/wiot/video?id='+ sid);
		}
	
		$(".operate_btn").click(function(){
			if(video_id == undefined || video_id == 'undefined'){
				tip("获取视频信息失败！");
			}else{
				//操作命令：0-上，1-下，2-左，3-右，4-左上，5-左下，6-右上，7-右下，8-放大，9-缩小，10-近焦距，11-远焦距
				direction = $(this).attr("tag"); 
				var data = {
					"direction":direction,
					"id":video_id,
					"speed":"1"
				}
			    commonAjax("POST",localUrl+"/ptz/start.json", data,function(data){
//					if(isOK(data)){
//						tip(data.statusMsg);
//					}
				});
			}
		})
		$(".stop_btn").click(function () {
		    if(video_id == undefined || video_id == 'undefined'){
				tip("获取视频信息失败！");
			}else{
				//操作命令：0-上，1-下，2-左，3-右，4-左上，5-左下，6-右上，7-右下，8-放大，9-缩小，10-近焦距，11-远焦距
				var data = {
					"id":video_id,
					"direction":direction
				}
			    commonAjax("POST",localUrl+"/ptz/stop.json", data,function(data){
				});
			}
		})
		
		//设备抓拍
		$(".device_capture").click(function(){
			var data = {
				"id":video_id
			}
		    commonAjax("POST",localUrl+"/device/capture.json", data,function(data){
			    if(isOK(data)){
			    	tip("抓拍成功，图片已保存");
			    }else{
			    	tip(data.statusMsg);
			    }
			});
		})
		
		function lokDetail(){
			window.location.href =  basePath + "/page/hkvideo/wiot_detail.html?videoId=" + video_id  ;
		}
	</script>
</html>